package myJs

import myJs.Implicits._
import myJs.analysis.Analysis
import myJs.api.Api
import myJs.browse.Browse
import myJs.cps.{PureInputCp, Style}
import myJs.download.Download
import myJs.explore.Explore
import myJs.help.Help
import myJs.contact.Contact
import myJs.myPkg.{MyFetch, ReactRouterDOM}
import myJs.search.Search
import myJs.statistics.Statistics
import org.scalajs.dom.window
import org.scalajs.dom.window.localStorage
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.concurrent.ExecutionContext.Implicits.global
import scala.scalajs.js
import typings.csstype.csstypeStrings

/**
 * Created by yz on 22/4/2022
 */
@react object HeaderCp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val (geneName, setGeneName) = useState("")
    val navigate = ReactRouterDOM.useNavigate()

    object FTool {

      def geneNameChange: String => Props = (v: String) => {
        setGeneName(v)
      }

      def geneNameSearch = () => {
        val url = s"${Search.absolutePath}?geneName=${geneName}&tab=mRna"
        window.location.href = url
      }

    }

    val imageMarginTop = 12
    val imageMarginBottom = 6

    div(
      div(style := Style(background = s"url('${Api.images}/bg.png') no-repeat", backgroundSize = "100% 130px"), className := "page-header",
        div(style := Style(marginTop = "0px", display = csstypeStrings.flex), className := "myLogoDiv",
          div(style := Style(flex = 2),
            img(style := Style(width = 214, marginTop = 15, marginBottom = 3), className := "logoPng", src := s"${Api.images}/logo.png")
          ),
          div(style := Style(flex = 5),
            h4(style := Style(color = "black", fontStyle = "italic", marginBottom = 0, marginTop = "40px",
              fontSize = 23, fontWeight = csstypeStrings.bold),
              "Gene expression profile in liver cells and tissue"
            ),
          ),
          div(style := Style(flex = 3),
            img(style := Style(width = 310, paddingLeft = 55, marginTop = imageMarginTop, marginBottom = imageMarginBottom), src := s"${Api.images}/bg_left.png")
          )
        )
      ),

      nav(className := "navbar navbar-inverse",
        div(className := "collapse navbar-collapse",
          ul(style := Style(width = "100%", display = csstypeStrings.flex, alignItems = csstypeStrings.center),
            className := "nav navbar-nav",
            li(a(href := Index.absolutePath, "Home")),
            li(a(href := Browse.absolutePath, "Browse")),
            li(a(href := Search.absolutePath, "Search")),
            li(a(href := Analysis.absolutePath, "Analysis")),
            li(a(href := Explore.absolutePath, "Single Cell")),
            li(a(href := Download.absolutePath, "Download")),
            li(a(href := Statistics.absolutePath, "Statistics")),
            li(a(href := Help.absolutePath, "Help")),
            li(a(href := Contact.absolutePath,"Contact")),

            li(style := Style(marginLeft = "auto", marginRight = 30),
              div(style := Style(textAlign = csstypeStrings.right, display = csstypeStrings.flex, alignItems = csstypeStrings.center),
                form(style := Style(), className := "form-inline",
                  div(className := "input-group",
                    PureInputCp(style = Style(height = 22, fontSize = 11, width = 142), name = "id", value = geneName, placeHolder = "Enter gene query",
                      onChange = FTool.geneNameChange),
                    span(className := "input-group-btn",
                      button(style := Style(paddingTop = 0, paddingBottom = 0, marginBottom = 0,
                        backgroundColor = "#002060"), `type` := "button", onClick := FTool.geneNameSearch,
                        className := "btn btn-primary",
                        i(className := "fas fa-search")
                      )
                    )
                  )
                )
              )
            ),

          )
        )
      )

    )

  }

}
